<template>
  <div class="pickers">
      <van-button type="default" icon="arrow-down" round block size="small" plain :text="area !== '' ? area : '请选择医院'" @click="show=true"></van-button>
      <van-popup v-model="show" position="bottom" :overlay="true" closeable round
          :style="{ height: '50%' }">
          <van-picker show-toolbar title="请选择医院" :columns="areas" @confirm="show=false" @cancel="show = false" @change="onChange" />
      </van-popup>
  </div>
</template>

<script>
import { get } from "@/api/common";
export default {
  props:['typeSearch','addrSearch'],
  data() {
    return {
      types: [],
      type: '',
      show: false,
    };
  },
  mounted() {
    this.getTypes();
  },
  methods: {
    onChange(picker, value, index) {
        this.show = false;
        this.type = value.text;
        this.$emit('selectedHospital',value);
    },
    // 调用api获得酒店医院列表
    getAreas() {
      let body = {
        'Wh_hospital': {
            '@column': 'name:text,id,',
            'type': this.typeSearch,
        }
      }
      if(this.addrSearch!=undefined)
        body['addr$'] = '%'+this.addrSearch+'%';
      let params={
        'Wh_hospital[]': body
        }
      let that = this;
      get(params)
        .then(function (res) {
          var data = res.data["Wh_hospital[]"]
          for(var d in data){
              that.areas.push({text:data[d].text,id:data[d].id,selected:false});
          }
        })
        .catch(function (error){
            console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.van-button__text {
  max-width: 10em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.van-button {
    margin-left: 5px;
}
</style>